/**
 * Created by bethinner on 5/17/16.
 */
import React, { Component } from 'react';

import { connect } from 'react-redux'
import browserHistory from 'react-router/lib/browserHistory'
import NavigationBar from '../components/NavigationBar'
import SpanInTagIcon from '../components/SpanInTagIcon'
import BarcodeView from '../components/BarcodeView'


 class MyCardDetailContainer extends Component {
    constructor(props) {
        super(props);
        this.state = {cardDetailData: this.props.location.state.data, nowCount: 0};
    }

    componentWillMount() {
        $('#loadingToast').hide();
    }

     componentDidMount() {
     }

     //跳转到卡券详情
     cardDetail(){
         $('#loadingToast').show();
         browserHistory.push({
                 pathname:'/cardDetail',
                 state:{
                     cardID:this.state.cardDetailData.card_id,
                 }
             }
         );
     }

     goBack(){
         browserHistory.push({
                 pathname:'/myCoupons',
                 state:{
                     type:window.sessionStorage.getItem("couponType")
                 }
             }
         );
     }
    render() {
        let withColor = (this.state.cardDetailData.status == 0);
        let refundMessageDiv ="";
        //itemType!=2排除因使用后卡券时间是过期的
        //console.log(this.props.location.state.itemType);
        if (this.props.location.state.itemType!=2&&this.state.cardDetailData.status ==2){
            refundMessageDiv=  <div style={{
                            color:"#7A9D5F",fontSize:"12px",textAlign:"center"
                            }}>
                卡券如未使用，会在1~5个工作日发起退款
            </div>
        }
        return (
            <div>

                <NavigationBar Title="详情" LeftBar="true" clickFunc={this.goBack} />
                <div style={{margin: "18px",height:"275px",borderRadius:"6px"}}>
                    <div style={topDivStyle}>
                        <div className="antd-row">
                            <div style={{width:"41.66666667%",float:"left"}}>
                                <img src={this.state.cardDetailData.pic_url}
                                     style={{height:"64px",width:"100%"}}
                                />
                                <div style={{textAlign:"right",lineHeight:"0px",marginTop:"3px"}}>
                                    <a href="javascript:void(0)" onClick={this.cardDetail.bind(this)} style={{
                                    color:"#2db7f5",
                                    background:"transparent",
                                    textDecoration:"none",
                                    outline: "none",
                                    cursor: "pointer",
                                    transition:"color .3s ease",
                                    fontSize:"12px"}}>
                                        卡券详情 >
                                    </a>
                                </div>
                            </div>

                            <div style={{width:"58.33333333%",float:"left"}}>
                                <div style={{marginLeft:"10px"}}>
                                    <div style={{fontSize:"16px",color:"#F7840B"}}>
                                        {this.state.cardDetailData.business_name}
                                    </div>
                                    <div style={{fontSize:"12px",color:"#4A4A4A"}}>
                                        {this.state.cardDetailData.card_name}
                                    </div>
                                    <div style={{fontSize:"10px",color:"#9B9B9B"}}>
                                        有效期:<br/>{this.state.cardDetailData.effective_start_time.substring(0,10)}至{this.state.cardDetailData.effective_end_time.substring(0,10)}
                                    </div>
                                </div>
                            </div>
                            <div style={{clear:"both"}}></div>
                        </div>
                    </div>
                    <div style={centerDivStyle}>
                        {<BarcodeView code={this.state.cardDetailData.ucid} />}
                        <div style={{　fontSize:"18px",wordBreak:"break-all",wordWrap:"break-word",lineHeight:"20px",color:"rgb(102,102,102)",padding:"10px 0px 10px 0px"}}>券码 {this.state.cardDetailData.ucid}</div>
                    </div>
                    <div style={bottomDivStyle}>
                        <div style={smallTextDivStyle}>
                            订单编号:{this.state.cardDetailData.orderform_code}
                        </div>
                        <div style={smallTextDivStyle}>
                            创建时间:{this.state.cardDetailData.create_time}
                        </div>

                        {/*<div style={{position:"relative"}}>
                            <SpanInTagIcon
                                bottom={"-14px"}
                                withColor={withColor}
                                text={statsText[parseInt(this.state.cardDetailData.status)+1]}/>
                        </div> <br/>*/}

                        <div style={{　clear:"both" }}></div>
                        {refundMessageDiv}
                    </div>
                </div>
            </div>

        )
    }

}

let topDivStyle = {
    padding: "18px",
    background: "white",
    borderTopRightRadius:"9px",
    borderTopLeftRadius:"9px"
};
let centerDivStyle = {
    //height: "60px",
    fontSize: "24px",
    //lineHeight: "60px",
    textAlign: "center",
    background: "radial-gradient(circle at bottom left,transparent 6px, white 0) top left," +
    "radial-gradient(circle at bottom right,transparent 6px, white 0) top right",
    backgroundSize: "60% 100%",
    backgroundRepeat: "no-repeat",
    borderBottomColor: "#EEEEEE",
    borderBottomStyle: "dotted",
    borderBottomWidth: "1px"
};
let bottomDivStyle = {
    //height: "200px",
    background: "radial-gradient(circle at top left,transparent 6px, white 0) top left," +
    "radial-gradient(circle at top right,transparent 6px, white 0) top right",
    backgroundSize: "60% 100%",
    backgroundRepeat: "no-repeat", borderRadius: "6px",
    paddingTop:"10px",
    paddingBottom:"10px"
}
let statsText = ["待付款", "未使用", "已使用", "已过期"];
let smallTextDivStyle = {
    height: "20px",
    fontSize: "12px",
    lineHeight: "20px",
    textAlign: "center",
    color: "#9B9B9B"
}

MyCardDetailContainer.defaultProps = {}

MyCardDetailContainer.propTypes = {}


module.exports=MyCardDetailContainer;